<template>
  <div style="text-align:left">
    药库管理
  </div>
  <hr/>
  <el-form :inline="true"  :model="formDrugCond" class="demo-form-inline">
    <el-form-item style="width: 25%;">
      <el-input v-model="formDrugCond.drugCode"
                placeholder="请输入药品编码" clearable/>
    </el-form-item>
    <el-form-item style="width: 25%;">
      <el-input v-model="formDrugCond.drugName"
                placeholder="请输入药品名称" clearable />
    </el-form-item>
    <el-form-item style="width: 25%;">
      <el-input v-model="formDrugCond.mnemonicCode"
                placeholder="请输入药品辅助码" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryDrugList">查询</el-button>
    </el-form-item>
  </el-form>
  <hr/>
  <div style="text-align: left">
    <el-button type="success" @click="openDialog">添加药品</el-button>
  </div>
  <hr/>
  <el-table :data="drugList" style="width: 100%">
    <el-table-column type="index" :index="indexMethod" />
    <el-table-column prop="drugCode" label="药品编码" width="130"/>
    <el-table-column prop="drugName" label="药品名称"/>
    <el-table-column prop="drugFormat" label="药品规格" />
    <el-table-column prop="drugUnit" label="包装单位" />
    <el-table-column prop="manufacturer" label="生产厂家" />
    <el-table-column prop="drugPrice" label="单价"  width="100"/>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-button type="info" @click="showDrug(row)">修改</el-button>

        <el-button type="warning">删除</el-button>
      </template>

    </el-table-column>


  </el-table>

  <div class="example-pagination-block">
    <el-pagination layout="prev, pager, next" :total="total" />
  </div>

<!--添加药品信息对话框-->
  <el-dialog
      v-model="dialogVisible"
      title="药品信息"
      width="700"
      :before-close="handleClose"
  >

    <el-form :model="formDrug" label-width="auto" style="max-width: 600px" ref="formRef">
      <el-form-item label="药品编码" prop="drugCode">
        <el-input v-model="formDrug.drugCode" />
      </el-form-item>
      <el-form-item label="药品名称"  prop="drugName">
        <el-input v-model="formDrug.drugName" />
      </el-form-item>
      <el-form-item label="药品规格"  prop="drugFormat">
        <el-input v-model="formDrug.drugFormat" />
      </el-form-item>
      <el-form-item label="包装单位"  prop="drugUnit">
        <el-input v-model="formDrug.drugUnit" />
      </el-form-item>
      <el-form-item label="产生厂家"  prop="manufacturer">
        <el-input v-model="formDrug.manufacturer" />
      </el-form-item>
      <el-form-item label="药剂类型"  prop="drugDosage">
        <el-input v-model="formDrug.drugDosage" />
      </el-form-item>
      <el-form-item label="药品类型"  prop="drugType">
        <el-input v-model="formDrug.drugType" />
      </el-form-item>
      <el-form-item label="药品单价"  prop="drugPrice">
        <el-input v-model="formDrug.drugPrice" />
      </el-form-item>
      <el-form-item label="拼音助记码"  prop="mnemonicCode">
        <el-input v-model="formDrug.mnemonicCode" />
      </el-form-item>
      <el-form-item label="药品库存"  prop="drugStore">
        <el-input v-model="formDrug.drugStore" />
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button type="primary" @click="onSubmitDrug">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-dialog>
</template>

<script setup>

import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
  //药品查询条件表单数据
  const formDrugCond=reactive({
    drugCode:'',
    mnemonicCode:'',
    drugName:''
  })
  //定义药品列表数据
  const drugList=ref([]);
  //定义分页总记录数
  const total=ref();
  //定义对话框显示状态
  const dialogVisible=ref(false);
  //定义药品添加的表单
  const formDrug=reactive({
    id:'',
    drugCode:'',
    drugName:'',
    drugFormat:'',
    drugUnit:'',
    manufacturer:'',
    drugDosage:'',
    drugType:'',
    drugPrice:'',
    mnemonicCode:'',
    creationDate:'',
    drugStore:''
  });
  onMounted(()=>{
    queryDrugList();
  });

  //定义表单引用
  const formRef=ref(null);
  //定义函数计算行的编码
  function indexMethod(index){
    index++;
    return index;
  }

  /*定义函数发送ajax请求，查询药品列表*/
  function queryDrugList(){
    axios.post("http://localhost/his/queryDrugPage",formDrugCond)
        .then((response)=>{
          drugList.value=response.data.drugInfos;
          total.value=response.data.total;
        })
        .catch((error)=>{
          console.log(error);
        });
  }

  var url="";
  /*打开添加药品信息对话框*/
  function openDialog(){
    //formRef.value.resetFields();
    //url赋值为处理添加请求的地址
    url="http://localhost/his/saveDrugInfo"
    dialogVisible.value=true;
  }

  /*定义函数发送药品信息添加的请求*/
  function onSubmitDrug(){
    axios.post(url,formDrug)
        .then((response)=>{
            //清空表单
            formRef.value.resetFields();
            dialogVisible.value=false;
            ElMessage(response.data.msg);
            queryDrugList(); //添加请求响应结束后，查询药品列表
        })
        .catch((error)=>{
          console.log(error);
        });
  }
  //打开药品信息对话框，回显药品信息
  function showDrug(row){
    //url赋值为处理更新请求的地址
    url="http://localhost/his/updateDrugInfo"
    for(var key in row){
      //给json对象属性赋值
      formDrug[key]=row[key];
    }
    console.log(formDrug);
    dialogVisible.value=true;
  }
</script>

<style scoped>

</style>